<!DOCTYPE html>
<html lang="en" class="no-js">

	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>环境规划与政策大数据共享平台</title>
		<link type="text/css" href="#(ctx)/static/portal/css/index.css" rel="stylesheet" />
		<script type="text/javascript" src="#(ctx)/static/portal/js/jquery.min.js"></script>

		<link rel="stylesheet" href="#(ctx)/lambkit/assets/libs/layui/css/layui.css">
		<style>
			#index {
				background: url(#(ctx)/static/portal/images/index/forgot.png) center top no-repeat;
				width: 1024px;
				height: 692px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -512px;
				margin-top: -346px;
			}
			
			#fglogin {
				position: absolute;
				left: 175px;
				top: 345px;
				color: blue;
			}
			
			.forgot {
				margin-top: 160px;
				margin-left: 40px;
				width: 935px;
			}
			
			.fgtitle {
				font-size: 20px;
				padding: 20px;
				color: #999;
			}
			
			.fgcontent {
				padding: 10px 100px;
			}
			
			.fghead {
				background: url(#(ctx)/static/portal/images/index/rpswd01.png) no-repeat;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-moz-background-size: 100% 100%;
				width: 670px;
				height: 80px;
				margin-bottom: 30px;
			}
			
			.fghead.fgyzimg {
				background: url(#(ctx)/static/portal/images/index/rpswd02.png) no-repeat;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-moz-background-size: 100% 100%;
				width: 670px;
				height: 80px;
				margin-bottom: 30px;
			}
			.fgyz {
				margin-top: 50px;
				margin-left: 200px;
				display: none;
			}
			.fgyz div {
				line-height: 30px;
			}
			.fgyz span {
				color: blue;
			}
		</style>
	</head>

	<body>
		<div id="index">
			<div class="forgot">
				<span class="fgtitle">重置密码</span>
				<hr />
				<div class="fgcontent">
					<div class="fghead"></div>
					<form class="layui-form fgform" action="">
						<div class="layui-form-item">
							<label class="layui-form-label">注册账号</label>
							<div class="layui-input-inline" style="width: 400px;">
								<input type="text" name="name" required lay-verify="required" placeholder="请输入用户名称" autocomplete="off" class="layui-input">
							</div>
							<div class="layui-form-mid layui-word-aux">默认用户名为邮箱的前缀</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">注册邮箱</label>
							<div class="layui-input-block" style="width: 400px;">
								<input type="text" name="email" required lay-verify="required" placeholder="请输入注册邮箱***@caep.org.cn" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-input-block">
								<button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
							</div>
						</div>
					</form>
					
					<div class="fgyz">
						<div id="">
							您正在重置密码的用户名为：<span class="name">sdfsd</span>
						</div>
						<div id="">
							您的邮箱为：<span class="email">sdfsd</span>
						</div>
						<div style="color: red;">请在1分钟内登录邮箱完成密码重置！</div>
					</div>
				</div>
				<!--end fgcontent-->
			</div>
			<!--end forgot-->
		</div>
		<!--end index-->

		<script src="#(ctx)/lambkit/assets/libs/layui/layui.js" charset="utf-8"></script>

		<script>
			layui.use(['layer', 'form'], function() {
				var form = layui.form;
				var layer = layui.layer;
				$ = layui.jquery;

				//监听提交
				form.on('submit(formDemo)', function(data) {
					//layer.msg(JSON.stringify(data.field));
					$(".name").text(data.field.name);
					$(".email").text(data.field.email);
					$.ajax({
						type: "POST",
						url: "#(ctx)/forgot",
						data: data.field,
						success: function(result) {
							//console.log(result);
							if(result.code==1) {
								$(".fgform").hide();
								$(".fgyz").show();
								$(".fghead").addClass("fgyzimg");
							} else {
								layer.alert(result.data, {icon: 1});
							}
						}
					});
					return false;
				});

			});
		</script>
	</body>

</html>